<template>
  <div class="home5">
    <p>
      <!--commit是用来提交 store 里的mutations方法-->
     <button @click="$store.commit('jia',10)">+</button>  <!--表示每次加10 mutations里也写一个对象-->
      <button @click="$store.commit('jian')">-</button>
      <button @click="add()">加</button>
      <button @click="reduce()">减</button>
      <button @click="addAction">addAction</button>
      <button @click="reduceAction()">addAction</button>
    </p>
    <!--应用方法-->
    <!--第一种 [直接在标签里写]：$store.state.count-->
    <!--<p>{{$store.state.count}}</p>-->

    <!--第二种 [在computed里面写然后在标签里直接写 count]-->
    <p>{{count}} - {{$store.state.count}}</p>


    <!--第三种通过mapState的对象来复制 ： 引用 mapstate-->

    <select v-model="selected" >
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
</template>

<script>
  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

  export default {
    name: 'Home5',
    data: function () {
      return {
        selected: 'A',
        options: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
      }
    },
    methods: {
//      mapMutations mapActions : 是为了代替$store.commit
      ...mapMutations([  // 管理触发状态
        'add','reduce'
      ]),
      ...mapActions([
        'addAction','reduceAction'
      ])
    },
    computed: { //computed 放的是一些业务逻辑代码，但是要return(计算)
      count() {
        return this.$store.state.count
      },
      ...mapState([  //管理状态太多，帮助生成计算属性
        'count'
      ]),
      /*...mapGetters([
        'count'
      ])*/
    }
  }
</script>

<style lang="scss">
  .home5 {
    width: 100%;
    margin-top: 20%;
    p {
      font-size: 24px;
    }
    button{
      font-size: 13px;
    }
  }
</style>
